import React, { useState, memo } from 'react';
import Modal from 'antd/lib/modal/Modal';
import SmallMap from './SmallMap';
import { useEffect } from 'react';
import { Button } from 'antd';
const MapModel = ({ visible, handleCancel, submit, map, initMap }) => {
  useEffect(() => {
    if (map) {
      return;
    }
    if (visible) {
      if (map == undefined) {
        initMap();
      }
    }
  }, [visible]);

  return (
    <Modal
      title="Basic Modal"
      visible={visible}
      onOk={submit}
      onCancel={() => {
        handleCancel();
      }}
      footer={[
        <Button key="back" onClick={handleCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={submit}>
          添加事件
        </Button>,
      ]}
    >
      <div id="map-modal" style={{ height: '280px' }}></div>
    </Modal>
  );
};

export default MapModel;
